<template>
	
	<view class="repair-detail">
		<view class="nav-bar">
		  <view class="back" @click="backPage"> 
		    <uni-icons type="left" size="20"></uni-icons> 
		  </view> 
		  <view class="title">救援详情</view> 
		  <view class="right"> 
		    <uni-icons type="more-filled" size="20"></uni-icons> 
		  </view> 
		</view> 

		<!-- 维修信息 -->
		<view class="info-section">
			<view class="section-title">救援信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">救援单号:</text>
					<text class="value">{{ helpInfo.id }}</text>
				</view>
				<view class="info-item">
					<text class="label">求助人:</text>
					<text class="value">{{helpInfo.name }}</text>
				</view>
				<view class="info-item">
					<text class="label">联系方式:</text>
					<text class="value " >{{ helpInfo.phone }}</text>
				</view>
				<view class="info-item">
					<text class="label">救援类型:</text>
					<text class="value">{{helpInfo.typeId === 1 ? '搭电' : 
						  helpInfo.typeId === 2 ? '换胎' : '拖车'  }}</text>
				</view>
				<view class="info-item" >
				  <text class="label">起点位置:</text>
				  <text class="value " >{{ helpInfo.position }}</text>
				</view>
				<view class="info-item">
					<text class="label">终点位置:</text>
					<text class="value">{{ helpInfo.end }}</text>
				</view>
				<view class="info-item">
					<text class="label">发起时间:</text>
					<text class="value">{{ helpInfo.time }}</text>
				</view>
				<view class="info-item">
					<text class="label">订单状态:</text>
					<text class="value">{{ helpInfo.status === 0 ? '求助中' :
					helpInfo.status === 1 ? '已接单' : '超时'}}</text>
				</view>
			</view>
		</view>

		<!-- 车辆信息 -->
		<!-- <view class="info-section">
			<view class="section-title">车辆信息</view>
			<view class="info-list">
				<view class="info-item">
					<text class="label">车辆类型:</text>
					 <text class="value">{{  }}</text>
				</view>
				<view class="info-item">
					<text class="label">车牌号:</text>
					<text class="value">{{ }}</text>
				</view>
				<view class="info-item">
					<text class="label">整车照片:</text>
				</view>
				<view class="image-preview">
					<image :src="reservationList.vehiclePhotos" mode="aspectFit"></image>
	
				</view>
				<view class="info-item">
					<text class="label">维修部位照片:</text>
				</view>
				<view class="image-grid">
					<image
					v-for="(photo, index) in reservationList.repairPhotos.split(',')" 
					:key="index" 
					:src="photo.trim()" 
					mode=""
					></image>
				</view>
			</view>
		</view> -->

		<!-- 底部按钮 -->
		<!-- <view
		 v-show="reservationList.status == 0"
			class="bottom-button"
			:class="{ disabled: arrived }"
			@tap="confirmArrival()"
		>
			{{ arrived ? '已到场' : '确认到场' }}
		</view>
		<view
		 v-show="reservationList.status == 1"
			class="bottom-button"
			:class="{ disabled: arrived }"
			@tap="confirmArrival2"
		>
			{{ arrived ? '完成' : '确认完成' }}
		</view> -->
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import request from '../../../../utils/request.js'



// 获取信息
const queryParams = ref({
	id: null,
})
onLoad((e) => {
  queryParams.value.id= e.id;
  gethelpInfo();
  
})
const helpInfo = ref({})
// 根据用户id查询维修预约表
function gethelpInfo() {
	request({
		url: '/yyq/helptask/'+queryParams.value.id,
		method: 'get',
		data:queryParams.value.id,
		success: (res) => {
			console.log(res.data)
			helpInfo.value = res.data.data
			console.log(helpInfo.value)
			
		},
	})
}


// 返回上一页
const backPage = () => {
	uni.navigateBack()
}




</script>

<style lang="scss">
.repair-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100rpx;

	.nav-bar {
		background-color: #007AFF;
		color: #fff;
		padding: 10px 16px 10px;
		display: flex;
		align-items: center;
		
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 18px;
		}
		
		.right-icons {
			width: 24px;
		}
	}

	.info-section {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;

		.section-title {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.info-list {
			.info-item {
				display: flex;
				margin-bottom: 20rpx;
				
				.label {
					color: #666;
					width: 160rpx;
				}
				
				.value {
					flex: 1;
					color: #333;
					
					&.clickable {
						color: #007AFF;
					}
					
					&.location {
						display: flex;
						align-items: center;
						
						&::after {
							content: '';
							width: 32rpx;
							height: 32rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.image-preview {
		width: 100%;
		height: 300rpx;
		margin: 20rpx 0;
		
		image {
			width: 100%;
			height: 100%;
			border-radius: 8rpx;
		}
	}

	.image-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		image {
			width: calc((100% - 40rpx) / 3);
			height: 200rpx;
			border-radius: 8rpx;
		}
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #007AFF;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		&.disabled {
			background-color: #999 !important;
			color: #fff !important;
			pointer-events: none;
		}
	}
}

.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}	
.back-icon { width: 30px; height: 30px;}	
.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 10rpx; left: 47rpx; transform: translate(-50%, -50%); }
.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 0rpx; left: 30rpx;}	 
</style>
